<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo00-var-scope</title>
</head>
<body>
  <input type="button" value='按钮1'>
  <input type="button" value='按钮2'>
  <input type="button" value='按钮3'>
</body>
</html>

<script>
   var btns = document.getElementsByTagName('input');
  // var btns = [1,2,3]
  for(var i=0;i<btns.length;i++ ){
    console.log(i);
    // 此处用完i 以后，不再引用i，即可实现其价值
    btns[i].setAttribute('id',i);
    btns[i].addEventListener('click',function(){
      console.log('点击按钮：' , this);
      console.log('回调函数显示 i : ' , i );  // 回调中对值的引用将会出现问题
      
    });
  }
</script>